<template>
    <div class="bottom_container">
        <label class="select_all">
            <input type="checkbox" @click="onSelectAll" :checked="selectAll"/>
            <span>全选</span>
        </label>
        <span class="item_stats">已完成{{completedTaskCount}}/总计{{totalTaskCount}}</span>
        <button class="delete_completed" @click="emit('delete-completed')">删除已完成事项</button>
    </div>
</template>

<script setup>
    import { computed } from 'vue';
    const emit = defineEmits(["delete-completed"])
    let props = defineProps(["todoTaskList",])
    let totalTaskCount = computed(()=> {
        return props.todoTaskList.length
    })
    let completedTaskCount = computed(()=>{
        return props.todoTaskList.filter(item=>item.isCompleted).length
    })
    let selectAll = computed(()=> {
        for(const todoTask of props.todoTaskList) {
            if (!todoTask.isCompleted) {
               return false
            }
        }
        return true
    })
function onSelectAll(event) {
    if (selectAll.value) {
        for (const todoTask of props.todoTaskList) {
            todoTask.isCompleted = false
        }
    } else {
        for (const todoTask of props.todoTaskList) {
            todoTask.isCompleted = true
        }
    }
}

</script>

<style scoped>
    .bottom_container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        width: 96%;
        margin-bottom: 8px;
        font-size: 18px;
    }
    .delete_completed {
        background-color: red;
        border-color: red;
        border-radius: 4px;
        padding: 6px 8px;
        color: white;
        font-size: 14px;
    }

</style>